<template>
  <div>
    <div class="item-title">
      费用统计
    </div>
    <div class="item-body">
      <div id="cost" ref="costRef" style="width: 100%;height: 232px;">

      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import {getEnergyCostData} from '@/api/bigScreen'
export default {
  name: 'CostStatistics',
  data() {
    return {
      costList: [],
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemWidth: 25,  // 图例项宽度
          itemHeight: 14,  // 图例项高度
          textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 14,
          },
        },
        grid: {
          top: '45px',
          left: '20px',
          right: '35px',
          bottom: '3%',
          containLabel: true
        },
        color: ['#5087ec', '#68bbc4'],
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: '#F8F8FF',
              width: 1,
            }
          },
          // max : 150000,
          min : 0,
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
            formatter: `{value}元`
          },
        },
        yAxis: {
          type: 'category',
          data: ['热','气', '水','电'],
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 0,
            }
          },
          splitLine: {
            lineStyle: {
              color: '#66B3FF',
              width: 1,
              opacity: 0.5
            }
          },
          splitNumber: 5,
        },
        series: [
          // {
          //   name: '202505',
          //   type: 'bar',
          //   data: [18203, 23489, 29034, 104970]
          // },
          // {
          //   name: '202506',
          //   type: 'bar',
          //   data: [19325, 23438, 31000, 121594]
          // }
        ]
      },
      myChart: null,
    }
  },
  mounted() {
    this.renderChart()
  },
  // 销毁组件
  beforeDestroy() {
    this.disposeChart();
  },
  watch:{
  },
  methods: {
    renderChart() {
        this.initEcharts()
    },
    initEcharts() {
      this.myChart = echarts.init(this.$refs.costRef);
      //获取数据
      this.getEnergyCost();
      window.addEventListener('resize', this.handleResize);
    },
    getEnergyCost(){
      getEnergyCostData(null).then(response => {
        if(response.code === 200) {
          this.option.series = response.data.series;
        }
        this.myChart.setOption(this.option);
      })
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    disposeChart() {
      if (this.myChart) {
        // 移除 resize 事件监听
        window.removeEventListener('resize', this.handleResize);
        // 销毁图表实例
        this.myChart.dispose();
        this.myChart = null;
      }
    }
  }
}
</script>
<style src="../../../assets/static/css/bigscreen.css" scoped></style>
<style lang="scss" scoped>
.item-body{
  //padding: 0 10px;
  //line-height: 262px;

}
</style>
